<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在线考试样式优化插件演示</title>
    <style>
        /* 模拟考试页面样式 */
        body {
            margin: 0;
            padding: 0;
            background-color: #f5f5f5;
            font-family: Arial, sans-serif;
        }
        
        .header {
            background: #2c3e50;
            color: white;
            padding: 1rem;
            text-align: center;
        }
        
        .bread-nav {
            background: #ecf0f1;
            padding: 0.5rem 1rem;
            border-bottom: 1px solid #bdc3c7;
        }
        
        .tools {
            background: #3498db;
            color: white;
            padding: 0.5rem;
            text-align: right;
        }
        
        .group-exam-page {
            max-width: 1200px;
            margin: 0 auto;
            padding: 1rem;
        }
        
        .paper-cnt {
            background: white;
            padding: 2rem;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            border-radius: 8px;
            margin: 1rem;
        }
        
        .main-title {
            font-size: 24px;
            text-align: center;
            margin-bottom: 2rem;
            color: #2c3e50;
        }
        
        .ques-item {
            margin-bottom: 2rem;
            padding: 1rem;
            border: 1px solid #e0e0e0;
            border-radius: 4px;
            transition: all 0.3s ease;
        }
        
        .ques-item:hover {
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            border-color: #3498db;
        }
        
        .question-number {
            font-weight: bold;
            color: #e74c3c;
            margin-right: 1rem;
        }
        
        .exam-item__cnt {
            line-height: 1.6;
        }
        
        .footer {
            background: #2c3e50;
            color: white;
            text-align: center;
            padding: 1rem;
            margin-top: 2rem;
        }
        
        /* 演示控制 */
        .demo-controls {
            position: fixed;
            top: 10px;
            left: 10px;
            background: white;
            padding: 1rem;
            border-radius: 4px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            z-index: 1000;
        }
        
        .demo-controls button {
            margin: 0.25rem;
            padding: 0.5rem 1rem;
            border: 1px solid #3498db;
            background: #3498db;
            color: white;
            border-radius: 4px;
            cursor: pointer;
        }
        
        .demo-controls button:hover {
            background: #2980b9;
        }
    </style>
</head>
<body>
    <!-- 演示控制 -->
    <div class="demo-controls">
        <h3>演示控制</h3>
        <button onclick="toggleOptimizer()">切换优化状态</button>
        <button onclick="applyStyles()">应用优化</button>
        <button onclick="removeStyles()">移除优化</button>
        <p id="status">当前状态：未优化</p>
    </div>

    <!-- 模拟考试页面结构 -->
    <div class="header">
        <h1>在线考试系统</h1>
    </div>
    
    <div class="bread-nav">
        首页 > 考试中心 > 期末考试
    </div>
    
    <div class="tools">
        <button>保存</button>
        <button>提交</button>
        <span>剩余时间：45:00</span>
    </div>

    <div class="group-exam-page">
        <div class="paper-cnt">
            <div class="paper-main">
                <h1 class="main-title">2025年秋季学期期末考试</h1>
                
                <div class="paper-body">
                    <div class="paper-part">
                        <div class="part-body">
                            <div class="ques-type">
                                <h2 class="questypename">一、选择题（每题5分，共30分）</h2>
                                
                                <div class="ques-item">
                                    <div class="tk-quest-item">
                                        <div class="wrapper">
                                            <span class="question-number">1.</span>
                                            <div class="exam-item__cnt">
                                                下列关于JavaScript闭包的说法，正确的是：
                                                <br><br>
                                                A. 闭包会导致内存泄漏，应该避免使用
                                                <br>
                                                B. 闭包可以访问外部函数的变量
                                                <br>
                                                C. 闭包只能在全局作用域中创建
                                                <br>
                                                D. 闭包不能访问外部函数的参数
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="ques-item">
                                    <div class="tk-quest-item">
                                        <div class="wrapper">
                                            <span class="question-number">2.</span>
                                            <div class="exam-item__cnt">
                                                CSS中，以下哪个属性用于设置元素的透明度？
                                                <br><br>
                                                A. visibility
                                                <br>
                                                B. display
                                                <br>
                                                C. opacity
                                                <br>
                                                D. transparent
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="ques-item">
                                    <div class="tk-quest-item">
                                        <div class="wrapper">
                                            <span class="question-number">3.</span>
                                            <div class="exam-item__cnt">
                                                在HTML5中，哪个标签用于定义导航链接？
                                                <br><br>
                                                A. &lt;nav&gt;
                                                <br>
                                                B. &lt;section&gt;
                                                <br>
                                                C. &lt;article&gt;
                                                <br>
                                                D. &lt;aside&gt;
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="footer">
        <p>© 2025 在线考试系统 | 技术支持：考试中心</p>
    </div>

    <!-- 模拟插件样式 -->
    <style id="demo-optimizer-style" disabled>
        /* 模拟插件样式 */
        .header, .bread-nav, .tools, .footer {
            display: none !important;
        }
        
        * {
            font-family: "宋体", sans-serif;
        }
        
        .question-number, .score, .time {
            font-family: "Times New Roman", serif !important;
        }
        
        .main-title, .questypename {
            font-weight: bold;
        }
        
        .exam-item__cnt {
            font-family: "宋体" !important;
        }
        
        .group-exam-page > .paper-cnt {
            max-width: 100% !important;
            width: 100% !important;
            padding-top: 0.25rem !important;
            margin-right: 0.25rem !important;
        }
        
        .group-exam-page > .paper-cnt > .paper-main {
            padding: 0 0.5rem 0 0.5rem !important;
        }
        
        .ques-item {
            padding: 0 0.625rem 0 1.25rem !important;
            margin-bottom: 0 !important;
        }
        
        .tk-quest-item .wrapper {
            padding: 0.25rem 0.5rem 0.25rem 0.5rem !important;
        }
        
        .ques-item:hover {
            box-shadow: none !important;
            border: 1px solid #e0e0e0 !important;
        }
    </style>

    <script>
        let isOptimized = false;
        
        function toggleOptimizer() {
            if (isOptimized) {
                removeStyles();
            } else {
                applyStyles();
            }
        }
        
        function applyStyles() {
            document.getElementById('demo-optimizer-style').disabled = false;
            document.getElementById('status').textContent = '当前状态：已优化';
            isOptimized = true;
        }
        
        function removeStyles() {
            document.getElementById('demo-optimizer-style').disabled = true;
            document.getElementById('status').textContent = '当前状态：未优化';
            isOptimized = false;
        }
    </script>
</body>
</html>
